<template>
  <el-row :gutter="20">
    <el-col :span="6">
      <el-form-item label="类别：">
        <el-cascader style="width:300px" v-model="categoryId" @change="show" :options="data" :props="props1"
          :show-all-levels="false" clearable />
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="关键字：">
        <el-input v-model="form.keywords" placeholder="请输入条码、名称、规格、型号查询" />
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item label="颜色：">
        <el-input v-model="form.color" placeholder="请输入颜色查询" />
      </el-form-item>
    </el-col>
    <el-col :span="6">
      <el-form-item>
        <el-button type="primary" @click="getTableData()">查询</el-button>
        <el-button @click="resetQuery()">重置</el-button>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <el-dropdown>
          <span v-if="queryShow == false" @click="changeQueryShow(true)" class="el-dropdown-link">
            展开<el-icon class="el-icon--right"><arrow-down /></el-icon>
          </span>
          <span v-else @click="changeQueryShow(false)" class="el-dropdown-link">
            收起<el-icon class="el-icon--right"><arrow-up /></el-icon>
          </span>
        </el-dropdown>
      </el-form-item>
    </el-col>
  </el-row>

  <div v-show="queryShow">
    <el-row :gutter="20">
      <el-col :span="6">
        <el-form-item label="状态：">
          <el-select v-model="form.enabled" placeholder="请选择" clearable>
            <el-option label="启用" :value="true" />
            <el-option label="禁用" :value="false" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="序列号：">
          <el-select v-model="form.serial_number" placeholder="请选择" clearable>
            <el-option label="有" :value="true" />
            <el-option label="无" :value="false" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="扩展信息：">
          <el-input v-model="form.mfrs" placeholder="请输入扩展信息查询" />
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item label="备注：">
          <el-input v-model="form.remark" placeholder="请输入备注查询" />
        </el-form-item>
      </el-col>
    </el-row>

    <el-row :gutter="20">

      <el-col :span="6">
        <el-form-item label="基础重量：">
          <el-input v-model="form.safety_stock" placeholder="请输入基础重量查询" />
        </el-form-item>
      </el-col>

    </el-row>
  </div>

  <el-button type="primary" @click="AddProductInfo()">新增</el-button>
  <el-button @click="DeleteRange">批量删除</el-button>
  <el-button @click="ExportProjectExcel">导出</el-button>
  <!--列设置-->
  <el-popover placement="right" width="300px" trigger="click">
    <template #reference>
      <el-button style="margin-right: 16px">列设置</el-button>
    </template>
    <table>
      <tbody>
        <tr>
          <td><el-checkbox label="条码" v-model="Listheading.c1" /></td>
          <td><el-checkbox label="名称" v-model="Listheading.c2" /></td>
          <td><el-checkbox label="规格" v-model="Listheading.c3" /></td>
        </tr>
        <tr>
          <td><el-checkbox label="型号" v-model="Listheading.c4" /></td>
          <td><el-checkbox label="颜色" v-model="Listheading.c5" /></td>
          <td><el-checkbox label="类别" v-model="Listheading.c6" /></td>
        </tr>
        <tr>
          <td><el-checkbox label="扩展信息" v-model="Listheading.c7" /></td>
          <td><el-checkbox label="单位" v-model="Listheading.c8" /></td>
          <td><el-checkbox label="库存" v-model="Listheading.c9" /></td>
        </tr>
        <tr>
          <td><el-checkbox label="采购价" v-model="Listheading.c10" /></td>
          <td><el-checkbox label="零售价" v-model="Listheading.c11" /></td>
          <td><el-checkbox label="销售价" v-model="Listheading.c12" /></td>
        </tr>
        <tr>
          <td><el-checkbox label="最低售价" v-model="Listheading.c13" /></td>
          <td><el-checkbox label="状态" v-model="Listheading.c14" /></td>
          <td><el-checkbox label="基础重量" v-model="Listheading.c15" /></td>
        </tr>
        <tr>
          <td><el-checkbox label="备注" v-model="Listheading.c16" /></td>
        </tr>
      </tbody>
    </table>
    <div>
      恢复默认列配置：<el-link type="primary" @click="ResetCheckbox">恢复默认</el-link>
    </div>
  </el-popover>

  <!--列表显示-->
  <el-table border height="550" :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
    <el-table-column type="selection" width="55" />
    <el-table-column prop="date" label="操作" width="100px">
      <template #default="scope">
        <el-button type="text" @click="handleEdit(scope.row.productid)">编辑</el-button>
        <el-button type="text" @click="handleDelete(scope.row)">删除</el-button>
      </template>
    </el-table-column>
    <el-table-column v-if="Listheading.c1" prop="bar_code" label="条码" />
    <el-table-column v-if="Listheading.c2" prop="product_name" label="名称" />
    <el-table-column v-if="Listheading.c3" prop="standard" label="规格" />
    <el-table-column v-if="Listheading.c4" prop="model" label="型号" />
    <el-table-column v-if="Listheading.c5" prop="color" label="颜色" />
    <el-table-column v-if="Listheading.c6" prop="name" label="类别" />
    <el-table-column v-if="Listheading.c7" prop="mfrs" label="扩展信息" />
    <el-table-column v-if="Listheading.c8" prop="unit" label="单位" />
    <el-table-column v-if="Listheading.c9" prop="current_number" label="库存">
      <template #default="scope">
        {{ scope.row.current_number?.toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column v-if="Listheading.c10" prop="purchase_decimal" label="采购价">
      <template #default="scope">
        {{ scope.row.purchase_decimal?.toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column v-if="Listheading.c11" prop="commodity_decimal" label="零售价">
      <template #default="scope">
        {{ scope.row.commodity_decimal?.toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column v-if="Listheading.c12" prop="wholesale_decimal" label="销售价">
      <template #default="scope">
        {{ scope.row.wholesale_decimal?.toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column v-if="Listheading.c13" prop="low_decimal" label="最低售价">
      <template #default="scope">
        {{ scope.row.low_decimal?.toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column v-if="Listheading.c15" label="基础重量">
      <template #default="scope">
        {{ scope.row.safety_stock?.toFixed(2) }}
      </template>
    </el-table-column>
    <el-table-column v-if="Listheading.c16" prop="remark" label="备注" />
    <el-table-column v-if="Listheading.c14" prop="enabled" label="状态">
      <template #default="scope">
        <el-tag v-if="scope.row.enabled" type="success">启用</el-tag>
        <el-tag v-else type="danger">禁用</el-tag>
      </template>
    </el-table-column>
  </el-table>

  <!--分页-->
  <div style="float:right">
    <el-pagination v-model:current-page="form.pageIndex" v-model:page-size="form.pageSize" :page-sizes="[100, 200, 300]"
      layout=" prev, pager, next, sizes" @size-change="handleSizeChange" :total="100000"
      @current-change="handleCurrentChange" />
  </div>

  <!--新增-->
  <el-dialog style="width: 70%;height:70%" v-model="dialogFormVisible" title="新增" width="500">
    <el-form style="max-width: 95%" :model="ruleForm" label-width="auto">
      <el-tabs v-model="activeName" class="demo-tabs">
        <el-tab-pane label="基本信息" name="first">
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="名称：">
                  <el-input v-model="ruleForm.productInfo.product_name" placeholder="请输入名称" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="规格：">
                  <el-input v-model="ruleForm.productInfo.standard" placeholder="请输入规格" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="型号：">
                  <el-input v-model="ruleForm.productInfo.model" placeholder="请输入型号" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单位：">
                  <el-input v-model="ruleForm.productInfo.unit" placeholder="输入单位" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="颜色：">
                  <el-input v-model="ruleForm.productInfo.color" placeholder="请输入颜色" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="基础重量：">
                  <el-input-number style="width:100%" :controls="false" v-model="ruleForm.productInfo.safety_stock"
                    placeholder="请输入基础重量(kg)" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="类别：">
                  <el-cascader style="width:100%" v-model="addcategoryId" @change="addcategoryIdshow" :options="data"
                    :props="props1" :show-all-levels="false" clearable placeholder="输入类别" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="序列号：">
                  <el-select v-model="ruleForm.productInfo.enable_serial_number" placeholder="是否有序列号" clearable>
                    <el-option label="有" :value="true" />
                    <el-option label="无" :value="false" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="是否启用：">
                  <el-select v-model="ruleForm.productInfo.enabled" placeholder="是否启用" clearable>
                    <el-option label="启用" :value="true" />
                    <el-option label="禁用" :value="false" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商品条码：">
                  <el-input v-model="ruleForm.product_Price.bar_code" placeholder="自动生成" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-input v-model="ruleForm.productInfo.remark" placeholder="请输入备注" />
            </el-form-item>
          </div>
        </el-tab-pane>

        <el-tab-pane label="价格信息" name="second">
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="采购价：">
                  <el-input-number style="width:100%" :controls="false" v-model="ruleForm.product_Price.purchase_decimal"
                    placeholder="请输入采购价" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="零售价：">
                  <el-input-number style="width:100%" :controls="false" v-model="ruleForm.product_Price.commodity_decimal"
                    placeholder="请输入零售价" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="销售价：">
                  <el-input-number style="width:100%" :controls="false" v-model="ruleForm.product_Price.wholesale_decimal"
                    placeholder="请输入销售价" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最低售价：">
                  <el-input-number style="width:100%" :controls="false" v-model="ruleForm.product_Price.low_decimal"
                    placeholder="输入最低售价" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <el-tab-pane label="扩展信息" name="third">
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="制造商：">
                  <el-input v-model="ruleForm.productInfo.mfrs" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="自定义1：">
                  <el-input v-model="ruleForm.productInfo.other_field1" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="自定义2：">
                  <el-input v-model="ruleForm.productInfo.other_field2" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="自定义3：">
                  <el-input v-model="ruleForm.productInfo.other_field3" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <el-tab-pane label="库存信息" name="fourth">
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="期初库存：">
                  <el-input-number :controls="false" v-model="ruleForm.product_Initial_Stock.number" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="当前库存：">
                  <el-input-number :controls="false" v-model="ruleForm.product_Current_Stock.current_number" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="resetForm()">取消</el-button>
        <el-button type="primary" @click="submitForm()">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>

  <!--修改-->
  <el-dialog style="width: 70%;height:70%" v-model="dialogForm" title="修改" width="500">
    <el-form style="max-width: 95%" :model="updateForm" label-width="auto">
      <el-tabs v-model="updateactiveName" class="demo-tabs">
        <el-tab-pane label="基本信息" name="first">
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="名称：">
                  <el-input v-model="updateForm.productInfo.product_name" placeholder="请输入名称" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="规格：">
                  <el-input v-model="updateForm.productInfo.standard" placeholder="请输入规格" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="型号：">
                  <el-input v-model="updateForm.productInfo.model" placeholder="请输入型号" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="单位：">
                  <el-input v-model="updateForm.productInfo.unit" placeholder="输入单位" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="颜色：">
                  <el-input v-model="updateForm.productInfo.color" placeholder="请输入颜色" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="基础重量：">
                  <el-input-number style="width:100%" :controls="false" v-model="updateForm.productInfo.safety_stock"
                    placeholder="请输入基础重量(kg)" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="类别：">
                  <el-cascader style="width:100%" v-model="updateCategoryId" @change="updatecategoryIdshow"
                    :options="data" :props="props1" :show-all-levels="false" clearable placeholder="输入类别" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="序列号：">
                  <el-select v-model="updateForm.productInfo.enable_serial_number" placeholder="是否有序列号" clearable>
                    <el-option label="有" :value="true" />
                    <el-option label="无" :value="false" />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="是否启用：">
                  <el-select v-model="updateForm.productInfo.enabled" placeholder="是否启用" clearable>
                    <el-option label="启用" :value="true" />
                    <el-option label="禁用" :value="false" />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="商品条码：">
                  <el-input v-model="updateForm.product_Price.bar_code" placeholder="自动生成" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item>
              <el-input v-model="updateForm.productInfo.remark" placeholder="请输入备注" />
            </el-form-item>
          </div>
        </el-tab-pane>

        <el-tab-pane label="价格信息" name="second">
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="采购价：">
                  <el-input-number style="width:100%" :controls="false"
                    v-model="updateForm.product_Price.purchase_decimal" placeholder="请输入采购价" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="零售价：">
                  <el-input-number style="width:100%" :controls="false"
                    v-model="updateForm.product_Price.commodity_decimal" placeholder="请输入零售价" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="销售价：">
                  <el-input-number style="width:100%" :controls="false"
                    v-model="updateForm.product_Price.wholesale_decimal" placeholder="请输入销售价" />
                </el-form-item>
              </el-col>
              <el-col :span="6">
                <el-form-item label="最低售价：">
                  <el-input-number style="width:100%" :controls="false" v-model="updateForm.product_Price.low_decimal"
                    placeholder="输入最低售价" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <el-tab-pane label="扩展信息" name="third">
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="制造商：">
                  <el-input v-model="updateForm.productInfo.mfrs" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="自定义1：">
                  <el-input v-model="updateForm.productInfo.other_field1" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="自定义2：">
                  <el-input v-model="updateForm.productInfo.other_field2" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="自定义3：">
                  <el-input v-model="updateForm.productInfo.other_field3" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>

        <el-tab-pane label="库存信息" name="fourth">
          <div>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="期初库存：">
                  <el-input-number :controls="false" v-model="updateForm.product_Initial_Stock.number" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="6">
                <el-form-item label="当前库存：">
                  <el-input-number :controls="false" v-model="updateForm.product_Current_Stock.current_number" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="noChange">取消</el-button>
        <el-button type="primary" @click="updateProductForm()">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { GetProductShow, DeleteProductRange, AddProductAndOther, GetProductOne, UpdateProductAndOther } from '../../api/product/index'
import { type GetProductShowCondition, type DeleteProductCondition, type AddProductCondition, type UpdateProductCondition } from '../../api/product/type'
import { GetMaterialCategoryTree } from '@/api/category/index'
import { ElMessage, ElMessageBox } from 'element-plus'
import moment from 'moment';

//导出
const ExportProjectExcel = () => {
  location.href = 'http://localhost:5184/ProductData/ExportExcel'
}


//列设置绑定字段
const Listheading = reactive({
  c1: true,
  c2: true,
  c3: true,
  c4: true,
  c5: true,
  c6: true,
  c7: false,
  c8: true,
  c9: true,
  c10: true,
  c11: true,
  c12: true,
  c13: false,
  c14: true,
  c15: false,
  c16: false
})
//列设置恢复默认
const ResetCheckbox = () => {
  Listheading.c1 = true
  Listheading.c2 = true
  Listheading.c3 = true
  Listheading.c4 = true
  Listheading.c5 = true
  Listheading.c6 = true
  Listheading.c7 = false
  Listheading.c8 = true
  Listheading.c9 = true
  Listheading.c10 = true
  Listheading.c11 = true
  Listheading.c12 = true
  Listheading.c13 = false
  Listheading.c14 = true
  Listheading.c15 = false
  Listheading.c16 = false
}


//编辑页面控制显示模块
const activeName = ref('first')
//添加页面控制显示模块
const updateactiveName = ref('first')

const dialogForm = ref(false)
//编辑
const handleEdit = (value: any) => {
  dialogForm.value = true
  getUpdateForm(value)
}
//待编辑字段
const updateForm = reactive<UpdateProductCondition>({
  productInfo: {
    productid: null,
    category_id: null,
    product_name: '',
    mfrs: '',
    safety_stock: null,
    model: '',
    standard: '',
    color: '',
    unit: '',
    remark: '',
    img_name: '',
    enabled: true,
    other_field1: '',
    other_field2: '',
    other_field3: '',
    enable_serial_number: null
  },
  product_Initial_Stock: {
    number: null
  },
  product_Current_Stock: {
    current_number: null
  },
  product_Price: {
    purchase_decimal: null,
    commodity_decimal: null,
    wholesale_decimal: null,
    low_decimal: null,
    bar_code: ''
  }
})
//编辑功能
const updateProductForm = async () => {
  //必填判断
  if (updateForm.productInfo.product_name == '') {
    ElMessage.error('商品名称不能为空值')
    return
  }
  if (updateForm.productInfo.category_id == null) {
    ElMessage.error('基本信息下的商品类别不能为空')
    return
  }
  if (updateForm.product_Price.purchase_decimal == null) {
    ElMessage.error('价格信息下的采购价不能为空')
    return
  }
  if (updateForm.product_Price.commodity_decimal == null) {
    ElMessage.error('价格信息下的零售价不能为空')
    return
  }
  if (updateForm.product_Price.wholesale_decimal == null) {
    ElMessage.error('价格信息下的销售价不能为空')
    return
  }
  if (updateForm.productInfo.mfrs == '') {
    ElMessage.error('扩展信息下的制造商不能为空值')
    return
  }
  if (updateForm.product_Initial_Stock.number == null) {
    ElMessage.error('库存信息下的期初库存不能为空')
    return
  }
  if (updateForm.product_Current_Stock.current_number == null) {
    ElMessage.error('库存信息下的当前库存不能为空')
    return
  }

  //编辑
  await UpdateProductAndOther(updateForm)
    .then(function (res) {
      if (res.data.code > 0) {
        ElMessage.success(res.data.message)
        //重新获取商品数据刷新页面
        getTableData()
        dialogForm.value = false
        updateactiveName.value = 'first'
      } else {
        ElMessage.error(res.data.message)
        return
      }
    })
}
//编辑取消
const noChange = () => {
  //对话框关闭
  dialogForm.value = false
  //修改页面模块为第一页
  updateactiveName.value = 'first'
}
//获取选中的待编辑数据并反填
const getUpdateForm = async (value: any) => {
  await GetProductOne(value)
    .then(res => {
      console.log(res.data[0])
      updateForm.productInfo.productid = res.data[0].productid
      updateForm.productInfo.category_id = res.data[0].category_id
      updateCategoryId.value = res.data[0].category_id
      updateForm.productInfo.product_name = res.data[0].product_name
      updateForm.productInfo.mfrs = res.data[0].mfrs
      updateForm.productInfo.safety_stock = res.data[0].safety_stock
      updateForm.productInfo.model = res.data[0].model
      updateForm.productInfo.standard = res.data[0].standard
      updateForm.productInfo.color = res.data[0].color
      updateForm.productInfo.unit = res.data[0].unit
      updateForm.productInfo.remark = res.data[0].remark
      updateForm.productInfo.img_name = res.data[0].img_name
      updateForm.productInfo.enabled = res.data[0].enabled
      updateForm.productInfo.other_field1 = res.data[0].other_field1
      updateForm.productInfo.other_field2 = res.data[0].other_field2
      updateForm.productInfo.other_field3 = res.data[0].other_field3
      updateForm.productInfo.enable_serial_number = res.data[0].enable_serial_number
      updateForm.product_Initial_Stock.number = res.data[0].number
      updateForm.product_Current_Stock.current_number = res.data[0].current_number
      updateForm.product_Price.purchase_decimal = res.data[0].purchase_decimal
      updateForm.product_Price.commodity_decimal = res.data[0].commodity_decimal
      updateForm.product_Price.wholesale_decimal = res.data[0].wholesale_decimal
      updateForm.product_Price.low_decimal = res.data[0].low_decimal
      updateForm.product_Price.bar_code = res.data[0].bar_code
    })
}
//编辑页面类型数组
const updateCategoryId = ref([])
const updatecategoryIdshow = () => {
  if (updateCategoryId.value != null) {
    updateForm.productInfo.category_id = updateCategoryId.value[updateCategoryId.value.length - 1]
  } else {
    updateForm.productInfo.category_id = null
  }
}

//添加字段
const ruleForm = reactive<AddProductCondition>({
  productInfo: {
    category_id: null,
    product_name: '',
    mfrs: '',
    safety_stock: null,
    model: '',
    standard: '',
    color: '',
    unit: '',
    remark: '',
    img_name: '',
    enabled: true,
    other_field1: '',
    other_field2: '',
    other_field3: '',
    enable_serial_number: null,
    tenant_id: Number(localStorage.getItem('tenant_id')),
    delete_flag: false
  },
  product_Initial_Stock: {
    depot_id: 1,
    number: null,
    tenant_id: Number(localStorage.getItem('tenant_id'))
  },
  product_Current_Stock: {
    depot_id: 1,
    current_number: null,
    tenant_id: Number(localStorage.getItem('tenant_id'))
  },
  product_Price: {
    bar_code: '',
    commodity_unit: '',
    sku: '',
    purchase_decimal: null,
    commodity_decimal: null,
    wholesale_decimal: null,
    low_decimal: null,
    tenant_id: Number(localStorage.getItem('tenant_id'))
  }
})

//添加
const dialogFormVisible = ref(false)
const AddProductInfo = () => {
  dialogFormVisible.value = true
  ruleForm.product_Price.bar_code = moment().format('YYYYMMDDHHmmssSSS');
}

const submitForm = async () => {
  if (ruleForm.productInfo.product_name == '') {
    ElMessage.error('商品名称不能为空值')
    return
  }
  if (ruleForm.productInfo.category_id == null) {
    ElMessage.error('基本信息下的商品类别不能为空')
    return
  }
  if (ruleForm.product_Price.purchase_decimal == null) {
    ElMessage.error('价格信息下的采购价不能为空')
    return
  }
  if (ruleForm.product_Price.commodity_decimal == null) {
    ElMessage.error('价格信息下的零售价不能为空')
    return
  }
  if (ruleForm.product_Price.wholesale_decimal == null) {
    ElMessage.error('价格信息下的销售价不能为空')
    return
  }
  if (ruleForm.productInfo.mfrs == '') {
    ElMessage.error('扩展信息下的制造商不能为空值')
    return
  }
  if (ruleForm.product_Initial_Stock.number == null) {
    ElMessage.error('价格信息下的期初库存不能为空')
    return
  }
  if (ruleForm.product_Current_Stock.current_number == null) {
    ElMessage.error('价格信息下的当前库存不能为空')
    return
  }

  await AddProductAndOther(ruleForm)
    .then(function (res) {
      if (res.data.code > 0) {
        ElMessage.success(res.data.message)
        getTableData()
        dialogForm.value = false
        resetForm()
      } else {
        ElMessage.error(res.data.message)
        return
      }
    })
}

const resetForm = () => {
  dialogFormVisible.value = false
  ruleForm.productInfo.category_id = null
  ruleForm.productInfo.product_name = ''
  ruleForm.productInfo.mfrs = ''
  ruleForm.productInfo.safety_stock = null
  ruleForm.productInfo.model = ''
  ruleForm.productInfo.standard = ''
  ruleForm.productInfo.color = ''
  ruleForm.productInfo.unit = ''
  ruleForm.productInfo.remark = ''
  ruleForm.productInfo.enabled = true
  ruleForm.productInfo.other_field1 = ''
  ruleForm.productInfo.other_field2 = ''
  ruleForm.productInfo.other_field3 = ''
  ruleForm.productInfo.enable_serial_number = null

  ruleForm.product_Initial_Stock.number = null

  ruleForm.product_Current_Stock.current_number = null

  ruleForm.product_Price.purchase_decimal = null
  ruleForm.product_Price.commodity_decimal = null
  ruleForm.product_Price.wholesale_decimal = null
  ruleForm.product_Price.low_decimal = null
}

const addcategoryId = ref([])
const addcategoryIdshow = () => {
  if (addcategoryId.value != null) {
    ruleForm.productInfo.category_id = addcategoryId.value[addcategoryId.value.length - 1]
  } else {
    ruleForm.productInfo.category_id = null
  }
}


const props1 = {
  checkStrictly: true,
}
const data = ref([])
const getData = async () => {
  await GetMaterialCategoryTree().then(function (res) {
    data.value = res.data
  })
}

const queryShow = ref(false)
//查询显示
const form = reactive<GetProductShowCondition>({
  pageSize: 100,
  pageIndex: 1,
  category_id: null,
  keywords: null,
  color: null,
  enabled: null,
  serial_number: null,
  batch_number: null,
  mfrs: null,
  goods_shelf: null,
  property: null,
  safety_stock: null,
  expiration_date: null,
  remark: null
})

const categoryId = ref([])
const show = () => {
  if (categoryId.value != null) {
    form.category_id = categoryId.value[categoryId.value.length - 1]
  } else {
    form.category_id = null
  }
  console.log(form.category_id)
}

const resetQuery=()=>{
  form.pageSize=100
    form.pageIndex=1
    form.category_id=null
    categoryId.value=[]
    form.keywords=null
    form.color=null
    form.enabled=null
    form.serial_number=null
    form.batch_number=null
    form.mfrs=null
    form.goods_shelf=null
    form.property=null
    form.safety_stock=null
    form.expiration_date=null
    form.remark=null
    getTableData()
}
// const pageShow = reactive({
//   totalCount: 0,
//   totalPage: 0
// })
const handleSizeChange = (val: number) => {
  form.pageSize = val
  form.pageIndex = 1
  getTableData()
}
const handleCurrentChange = (val: number) => {
  form.pageIndex = val
  getTableData() 
}
const changeQueryShow = (val: any) => {
  queryShow.value = val
}

const tableData = ref([])
const getTableData = async () => {
  console.log(form)
  await GetProductShow(form)
    .then(res => {
      console.log(res.data.data)
      tableData.value = res.data.data
    })
}


const multipleSelection = ref([])
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val
}


const niuma: any = reactive<DeleteProductCondition>({
  isd: []
})

const handleDelete = (productvalue: any) => {
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      console.log(productvalue.productid)
      niuma.isd.push(productvalue.productid)
      console.log(niuma.isd)
      await DeleteProductRange(niuma.isd)
        .then(function (res) {
          if (res.data.code > 0) {
            ElMessage.success(res.data.message)
            getTableData()
          } else {
            ElMessage.error(res.data.message)
            return
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}

//批量删除
const DeleteRange = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage.error("至少选择一项删除")
    return
  }
  ElMessageBox.confirm(
    '确认删除吗?',
    '警告',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(async () => {
      niuma.isd = multipleSelection.value.map((p: any) => p.productid)
      await DeleteProductRange(niuma.isd)
        .then(function (res) {
          if (res.data.code > 0) {
            ElMessage.success(res.data.message)
            getTableData()
          } else {
            ElMessage.error(res.data.message)
            return
          }
        })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '操作取消',
      })
    })
}

onMounted(() => {
  getTableData()
  getData()
})
</script>

<style scoped>
.el-row {
  margin-bottom: 5px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

.demo-tabs>.el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>